<template>
  <div class="product-list">
    <!-- 头部 -->
    <NavigationBar title="产品"></NavigationBar>
    <GoodsList2 v-if="$route.params.id==1424" :productList="productList"></GoodsList2>
    <GoodsList1 v-else :productList="productList"></GoodsList1>
    <div class="other">
      <h1>其他分类</h1>
      <OtherCategoriesList :otherCategories="otherCategories"></OtherCategoriesList>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductList",
  data() {
    return {
      // 其他类别
      otherCategories: [],
      // 商品列表
      productList: []
    }
  },
// 侦听器
  watch: {
    '$route'(to, from) {
      this.otherCategories = []
      this.productList = []
      this.getProductCategory()
      this.getProductList()
    }
  },
// 计算属性
  computed: {},
// 事件
  methods: {
    getProductCategory() {
      this.$ajax.productCategory().then((res) => {
        if (res.error_code === 0) {
          this.otherCategories = res.data.filter(item => item.id != this.$route.params.id)
          // console.log("其他类别", this.otherCategories)
        } else {
          this.$toast(res.error_msg)
        }
      })
    },
    getProductList() {
      this.$ajax.productList({id: this.$route.params.id}).then((res) => {
        if (res.error_code === 0) {
          this.productList = res.data
          // console.log("产品列表", this.productList)
        } else {
          this.$toast(res.error_msg)
        }
      })
    }
  },
// 生命周期
  created() {
  },
  mounted() {
    this.getProductCategory()
    this.getProductList()
  }
}
</script>

<style lang="scss" scoped>
.product-list {
  background-color: #f5f5f5;

  .other {
    border-top: 1px solid #e4e4e4;
    width: 100%;

    h1 {
      color: #4a4a4a;
      font-size: 26px;
      padding: 22px;
      padding-top: 40px;
      box-sizing: border-box;
      width: 100%;
    }
  }


}
</style>